<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: black;
        }
        .clearfix:after{
            content: '';
            display: block;
            visibility: hidden;
            clear: both;
        }
        .root{
            min-width:1366px;
        }
        .warp{
            width:800px;
            margin: 0 auto;
            padding-top: 20px;
        }
        /* 上 */
        .tpleft{
            float: left;
        }
        /* .tpleft img{
            width: ;
        } */
        .tpcenter{
            float: left;
            margin-left: 20px;
        }
        .tpcenter p{
            float: left;
            font-size: 20px;
            margin-right: 10px;
        }
        .tpcenter span{
            font-size: 20px;
        }
        .tpcenter strong{
            display: inline-block;
            width: 26px;
            line-height: 26px;
            background-color: black;
            color: white;
            text-align: center;
            border-radius: 4px;
            font-family: '华文楷体';
        }
        .tpcenter div{
            float: left;
        }
        .tpright{
            float: right;
        }
        .tpright p{
            float: left;
            width: 120px;
            line-height: 30px;
            border: 1px solid red;
            text-align: center;
            cursor: pointer;
        }
        .trlft{
            border-radius: 5px 0 0 5px;
            color: red;
        }
        .trrit{
            border-radius: 0 5px 5px 0;
            color: red;
        }
        /* .change{
            background-color: red;
            color: white;
        } */
        /* 下 */
        .btm{
            padding: 30px 0;
        }
        .bmlft{
            float: left;
            padding: 10px 26px;
        }
        .btm p{
            font-size: 18px;
            cursor: pointer;
        }
        .btm span{
            color:red;
            font-size: 18px;
            font-weight: 600;
        }
        .btm s{
            color:gray;
            font-size: 14px;
            font-weight: 100;
            margin-left: 10px;
        }
        .mish{
            color:gray;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="root">
        <div class="warp">
            <!-- 上 -->
            <div class="clearfix">
                <div class="tpleft">
                    <img src="./imgs/1.png" alt="">
                </div>
                <div class="tpcenter clearfix">
                    <p>距离下场</p>
                    <div>
                        <strong class="one">00</strong>
                        <span>:</span>
                        <strong class="two">00</strong>
                        <span>:</span>
                        <strong class="three">00</strong>
                    </div>
                </div>
                <div class="tpright clearfix">
                    <p class="trlft">20:00场</p>
                    <p class="trrit">0:00场</p>
                </div>
            </div>
            <!-- 下 -->
            <div class="btm clearfix">
                <!-- <div class="bmlft">
                    <div>
                        <img src="" alt="">
                    </div>
                    <p>商品标题</p>
                    <div>
                        <span>价格</span>
                        <s>价格</s>
                    </div>
                    <div class="mish">
                        文案
                    </div>
                </div>
                <div class="bmlft">
                    <div>
                        <img src="" alt="">
                    </div>
                    <p>商品标题</p>
                    <div>
                        <span>价格</span>
                        <s>价格</s>
                    </div>
                    <div class="mish">
                        文案
                    </div>
                </div>
                <div class="bmlft">
                    <div>
                        <img src="" alt="">
                    </div>
                    <p>商品标题</p>
                    <div>
                        <span>价格</span>
                        <s>价格</s>
                    </div>
                    <div class="mish">
                        文案
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</body>
</html>
<script src="./shuju.js"></script>
<script>
    function $(dob){
        return document.querySelector(dob);
    }
    function get(dod){
        return [...document.querySelectorAll(dod)];
    }
    window.onload = function(){
        n=1;
        nav(n,arr);
    }
    function nav(n,arr){
        var start = (n-1)*3;
        var end = start +3;
        var newArr = arr.slice(start,end);
        //获取需要渲染的数据
        var btm = $('.btm');
        var bmlftImgs = get('.bmlft img');
        var btmP = get('.btm p');
        var btmSpan = get('.btm span');
        var btmS = get('.btm s');
        var mish = get('.mish');
        var str ='';
        for(var a=0;a<newArr.length;a++){
            str += '<div class="bmlft"><div><img src="' + newArr[a].img + '"></div>';
            str += '<p>' + newArr[a].wen + '</p>';
            str += '<div><span>' + newArr[a].bpic + '</span><s>' + newArr[a].lpic + '</s></div>';
            str += '<div class="mish">' + newArr[a].zhu + '</div></div>';
            btm.innerHTML = str;
        }
    }

    //点击时间场换背景颜色和字体颜色
    var tprightp = get('.tpright p');
    
    // function change(){
    //     for(var a=0;a<tprightp.length;a++){
    //         tprightp[a].onclick = function(){
    //             for(var b=0;b<tprightp.length;b++){
    //             }
                
    //         }
    //     }
    // }


    // 倒计时效果
    var tpcenterstr = get('.tpcenter strong');
    var one = $('.one');
    var two = $('.two');
    var three = $('.three');
    var timer;

    //封装两个场次分别的时间 我设置的是下一天的这个时间
    function time1(){
        time('2022.3.7 00:00:00');
    }
    function time2(){
        time('2022.3.7 20:00:00');
    }
    
    //点击右上角的时间场次 实现高亮效果并实现倒计时出现剩余的时间
    tprightp[0].onclick = function(){
        tprightp[1].style.background = '';
        tprightp[1].style.color = '';
        this.style.background = 'red';
        this.style.color = 'white';
        time2();
        timer2 = setInterval(time2,1000);
        clearInterval(timer1);
        if(one.innerHTML && two.innerHTML && three.innerHTML <= 00){
            clearInterval(timer2);
        }
        n=1;
        nav(n,arr);
    }
    tprightp[1].onclick = function(){
        tprightp[0].style.background = '';
        tprightp[0].style.color = '';
        this.style.background = 'red';
        this.style.color = 'white';
        time1();
        timer1 = setInterval(time1,1000);
        clearInterval(timer2);
        if(one.innerHTML && two.innerHTML && three.innerHTML <= 00){
            clearInterval(timer1);
        }
        n=2;
        nav(n,arr);
    }

    //获取时间差 每个时间段小于10前面加上0
    function time(n){
        var date1 = new Date();
        var date2 = new Date(n);
        var cha = date2-date1;
        var hour = parseInt(cha/1000/60/60%24);
        var minus = parseInt(cha/1000/60%60);
        var mils = parseInt(cha/1000%60);
        one.innerHTML = hour;
        two.innerHTML = minus;
        three.innerHTML = mils;

        if(one.innerHTML < 10){
            one.innerHTML = '0' + hour;
        }
        if(two.innerHTML < 10){
            two.innerHTML = '0' + minus;
        }
        if(three.innerHTML < 10){
            three.innerHTML = '0' + mils;
        }
    }

    // 设置页面一打开就自动显示的 时间和高亮效果
    tprightp[0].style.background = 'red';
    tprightp[0].style.color = 'white';
    time2();
    timer2 = setInterval(time2,1000);
    // clearInterval(timer1);
    if(one.innerHTML && two.innerHTML && three.innerHTML <= 00){
        clearInterval(timer2);
    }
    
</script>